import React, { useEffect } from 'react';
import * as echarts from 'echarts';

import '../../scss/fp/trand.scss'


function Trand(props) {

  setTimeout(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

      option = {
        title: {
          text: '数据走势'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',  
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['洗发水', '补水液', '规格', '出售价格', '进货价格']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['商品名称', '品牌', '分类', '规格', '价格']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '洗发水',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '补水液',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1, 2, 3, 4, 5, 6, 7]
          },
          {
            name: '规格',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [200, 600, 1200, 800, 1500, 1000, 600]
          },
          {
            name: '出售价格',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [250, 400, 600, 320, 800, 500, 100]
          },
          {
            name: '进货价格',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [300, 400, 800, 600, 700, 1200, 900]
          }
        ]
      };

      option && myChart.setOption(option);
  }, 100);


  return (
    <div className='nbmax'>
      <div id="main" style={{width:1000,height:400}}></div>
    </div>
  );
}

export default Trand;